<template>
    <div class="container container-brokerDrawer">
        <a-drawer width="1000" title="" placement="right" :closable="true" :visible="visible" @close="onClose"
            class="brokerDrawer-drawer">
            <a-spin tip="Loading..." :spinning="formLoading">
                <div>
                    <BrokerVue ref="brokerVue" />
                </div>

                <div class="register-btn-box">
                    <a-button class="register-btn" type="default" @click="cancel">取消</a-button>
                    <a-button class="register-btn" type="primary" @click="save">提交申请</a-button>
                </div>
            </a-spin>
        </a-drawer>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import api from "@/api/api";
import UploadVue from "@/components/upload.vue";
import areaJson, { getAreaWords } from "@/utils/area";
import BrokerVue from "./components/broker.vue";
@Component({
    name: "dom",
    components: { UploadVue, BrokerVue },
})
export default class index extends Vue {
    @Prop({ default: false }) visible!: boolean;
    formLoading = false;
    onClose() {
        //(this.$refs.form as any).resetFields();
        this.$emit("closeDrawer");
    }
    cancel() {
        this.onClose();
    }
    async save() {
        const brokerInfo = (this.$refs.brokerVue as any).getInfo();
        if (brokerInfo === false) return;
        this.formLoading = true;
        try {
            const data = {
                ...brokerInfo,
            };
            const res = await api.brokerRegister(data);
            this.$message.success("申请成功,请等待后台人员审核");
            this.onClose();
        } finally {
            this.formLoading = false;
        }
    }
}
</script>

<style lang="scss">
.brokerDrawer-drawer.ant-drawer-open {
    .ant-drawer-content-wrapper {
        right: 30px !important;
    }
}
.brokerDrawer-drawer {
    .ant-drawer-content {
        border-radius: 12px;
    }
    .ant-drawer-content-wrapper {
        height: 90% !important;
        top: 5%;
    }
    .form-panel {
        padding-bottom: 20px;
    }
    .register-btn-box {
        margin-top: 50px;
        display: flex;
        margin: 0 auto;
        width: 300px;
        justify-content: space-between;
    }
    .register-btn {
        width: 120px;
        height: 38px;
        font-size: 16px;
    }
}
</style>
